<!DOCTYPE html>
<html>
<head>
    <title></title><script type="text/javascript" src="../base/js/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="console" style="width: 200px;height: 500px;border: 1px solid #dd6644;background-color: #cccccc;">

</div>
<input type="button" value="Clear" onclick="document.getElementById('console').innerHTML = ''">
<script type="text/javascript">
    var input = $("#input"),
            con = $("#console");
    input.bind("mousedown",function(){
        con.append("mousedown<br/>");
    });
    input.bind("mouseup",function(){
        con.append("mouseup<br/>");
    });
    input.bind("focus",function(){
        con.append("focus<br/>");
    });
    input.bind("blur",function(){
        con.append("blur<br/>");
    });
    input.bind("click",function(){
        con.append("click<br/>");
    });

    //////////////////////
    con.bind("mousedown",function(){
        con.append("mousedown<br/>");
    });
    con.bind("mouseup",function(){
        con.append("mouseup<br/>");
    });
    con.bind("focus",function(){
        con.append("focus<br/>");
    });
    con.bind("blur",function(){
        con.append("blur<br/>");
    });
    con.bind("click",function(){
        con.append("click<br/>");
    });
</script>
</body>
</html>